<template>
  <el-card class="content">
    <div id="rain" class="rainData"></div>
  </el-card>
</template>

<script>
import TextTree from "~/components/TextTree";
import * as constants from "../../../../assets/realTime.config";
import moment from "moment";
export default {
  name: "Onlinemonitor",
  components: {},
  props: {},
  data() {
    return {};
  },
  mounted() {
    var list = constants.gnss.parameter.list;
    let xData = [];
    let yData = [];
    console.log(list);
    if (list != null && list != "undefined") {
      for (var i = 0; i < list.length; i++) {
        xData.push(
          moment(Number(list[i].theDate) / 1).format("yyyy-MM-dd hh:mm:ss")
        );
        yData.push(list[i].pW);
      }
    }
    const chartLine = this.$echarts.init(document.getElementById("rain"));
    const createMoistureInversionChart = (xData, yData) => {
      console.log(chartLine);
      console.log(xData, yData);

      var text = "GNSS反演可降水量";
      var option = {
        title: {
          text: text,
          left: "center",
        },
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter: "{b0}<br />{a}&nbsp;:&nbsp;{c0}mm",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            axisLine: {
              onZero: false,
            },
            type: "category",
            data: xData,
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            name: "PWV(mm)",
            nameLocation: "end",
            type: "value",
            inverse: false,
            nameGap: 30,
            // axisLabel: {
            //     formatter: 'PWV {value} mm'
            // }
          },
        ],
        series: [
          {
            name: "pwv",
            type: "bar",
            data: yData,
          },
        ],
      };
      chartLine.setOption(option);
    };
    createMoistureInversionChart(xData, yData);
  },
  methods: {},
  watch: {},
};
</script>

<style  scoped>
.content {
  *display: flex;
  /*align-items:center;*/
  /*justify-content:center;*/
  height: 87vh;
  margin-right: 5px;
  overflow: auto;
}
.rainData {
  width: 1000px;
  height: 82vh;
  margin: 0 auto;
  /* background: rebeccapurple; */
}
</style>